<template>
  <!-- 课程中心 -->
  <view class="qy-page-course-center">
    <view>
      <uni-nav-bar fixed shadow :border="false" title="课程中心" left-icon="left" @clickLeft="onClickLeft">
      </uni-nav-bar>
      <view class="uni-nav-bottom" slot="bottom">
        <uni-search-bar @confirm="searchList" v-model="searchValue" placeholder="请输入搜索关键词" cancelButton="none" :radius="20"
                        @clear="() => { searchValue = ''; searchList() }" @cancel="searchList">
        </uni-search-bar>
        <view class="container-dropdown flex-wrap flex-center flex-middle">
          <dropdown-item v-model="orderType" :options="sortOptions"></dropdown-item>
          <dropdown-item :title="cateDropdownTitle">
            <CustomTreeSelect :key="currentSiteType" overflowScroll :categoryList="mainCategoryList"
            @changeCategory="changeCategory">
            </CustomTreeSelect>
          </dropdown-item>
        </view>
      </view>
    </view>

    <view class="list-wrap common-wrap">
      <van-list
          v-model="listLoading"
          :finished="listFinished"
          finished-text="没有更多了"
          @load="loadMore"
          :immediate-check="false">
        <CourseList :list="courseList" vertical ></CourseList>
      </van-list>
    </view>
  </view>
</template>

<script setup>
import {onLoad, onLaunch, onShow} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, onMounted, onBeforeUnmount,toRef, toRefs, getCurrentInstance} from 'vue';
import CustomSelect from '@/components/common/CustomTreeSelect';
import CustomTreeSelect from '@/components/common/CustomTreeSelect';
import CourseList from '@/components/course/CourseList';
import VanList from "@/components/vant/van-list/van-list.vue";
import VanActionSheet from "@/components/vant/van-action-sheet/van-action-sheet.vue";
import DropdownItem from "@/components/dropdown-item/dropdown-item.vue";
import mockCourse from "@/mock/course/course.json"
const {$toast, $uniPush, $uniRedirectTo} = getCurrentInstance()?.proxy
const props = defineProps({
  // 定义组件的 props
});
const emit = defineEmits([
  // 定义组件的 emit 事件
]);
const defaultValue = {
  categoryId: '',
  name: '全部'
}

const orderType = ref(0);
const sortOptions = ref([
  {text: '综合排序', value: 0},
  {text: '最新', value: 1},
]);
const currentSiteType = ref('D');
const siteOptions = ref([
  {text: '集团', value: 'S'},
  {text: '单位', value: 'D'},
]);
const queryCateId = ref('');
const checkedTypes = ref([]);
const checkedRegTypes = ref([]);

const activeFirstCateIndex = ref(0);
const selectCateTypes = ref([]);
const cateDropdownTitle = ref('课程分类');
let mainCategoryList = reactive([]); // 主分类列表
const childrenCategoryList = ref([defaultValue]); // 次级分类列表，确保 defaultValue 已经被定义
const page = ref({pageNumber: 1, pageSize: 10,});
const courseList = ref([]); // 课程列表
const listLoading = ref(false);
const listFinished = ref(false);
const searchValue = ref('');
const pageLoading = ref(null);
const actions = ref([
  {text: '集团', value: 'S'},
  {text: '单位', value: 'D'},
]);
onLoad((query)=>{
 searchValue.value = query.key || getApp().globalData.searchValue || "";
})
onShow(()=>{
	searchValue.value =getApp().globalData.searchValue || "";
})
onMounted(() => {
    getMenuSource()
})
const getMenuSource = () => {
	 getCourseList();
	 getCategoryList();
}
// 定义点击事件的处理函数
const onClickLeft = () => {
  uni.navigateBack({delta: 1});
};
const changeCategory = (data) => {
  queryCateId.value = data.categoryId
  cateDropdownTitle.value = data.name
  searchList()
}
// 获取分类列表
const getCategoryList = async () => {
	mockCourse.categoryData.forEach(item => {item.text = item.name,item.children=reactive([])});
	mainCategoryList.push(...mockCourse.categoryData);
};
// 获取课程列表
const getCourseList = async (loadNew = false) => {
	if (loadNew) return;
   courseList.value = courseList.value.concat(mockCourse.data.list || []);
   listFinished.value=true;
};
// 加载更多
const loadMore = () => {
  if (!listFinished.value) getCourseList();
};
const closeDropdown = () => {
  uni.$emit('closeDropdown')
}
// 查询
const searchList = async () => {
  closeDropdown();
  await getCourseList(true);
};
</script>

<style lang="scss" scoped>
.qy-page-course-center {
  .uni-nav-bottom {
    width: 100%;
  }
  .center-bar {
    position: fixed;
    width: 100%;
    z-index: 100;
    background: #ffffff;
    top: 40px;
  }

  .list-wrap {
    //padding-top: 100px;
    height: calc(100vh - var(--status-bar-height) - 44px);
  }

  .default-title {
    margin-bottom: 8px;
  }
}
</style>